<template>
  <!-- 催收执行页-还款信息 -->
  <section class="component repayment-information">
    <!-- 还款信息 -->
    <el-row>
      <el-form>
        <el-col :span="8">
          <el-form-item label="绑定默认扣款卡号：">
            <span>{{ caseInfo.deductionCardNumber }}</span>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="8">
          <el-form-item label="代还卡号：">
            <span>{{ caseInfo.replaceCardNumber }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="绑定扣款卡号：">
            <span>{{ caseInfo.defaultCardNumber }}</span>
          </el-form-item>
        </el-col> -->
        <el-col :span="8">
          <el-form-item label="默认扣款卡银行：">
            <span>{{ caseInfo.deductionCardBank }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="我行账户号：">
            <span>{{ caseInfo.depositCaseNumber }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="绑定扣款卡号1：">
            <span>{{ caseInfo.deductionCardNumber }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="绑定扣款卡号2：">
            <span>{{ caseInfo.deductionCardNumber2 }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="绑定扣款卡号3：">
            <span>{{ caseInfo.deductionCardNumber3 }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="绑定扣款卡号4：">
            <span>{{ caseInfo.deductionCardNumber4 }}</span>
          </el-form-item>
        </el-col>
        
        <el-col :span="8">
          <el-form-item label="企业还款通路：">
            <span>{{ caseInfo.enterpriseRepayChannel }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="个人还款通路：">
            <span>{{ caseInfo.personalRepayChannel }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="还款识别码：">
            <span>{{ caseInfo.repayCode }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="最近一次还款时间：">
            <span>{{ $filter.dateTimeFormat(caseInfo.latelyPayDate) }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="最近一次还款金额：">
            <span>{{ caseInfo.latelyPayAmount }}元</span>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Dependencies } from "~/core/decorator";
import { Prop } from "vue-property-decorator";
import { CASE_CHANNEL, MENU_CHANNEL } from "~/config/enum.config";
import { namespace } from "vuex-class";
import { CaseOperatorPageService } from "~/services/domain-service/case-operator-page.service";

const CollectionExecutionModule = namespace("collection-execution");

@Component({
  components: {

  }
})
export default class CaseInfo extends Vue {
  @Dependencies(CaseOperatorPageService) private CaseOperatorPageService: CaseOperatorPageService;
  private caseInfo: any = {};
  @CollectionExecutionModule.State private menuChannel;
  @CollectionExecutionModule.State private caseId: string;

  private activated() {
    this.refreshData();
  }

  private refreshData() {
    this.CaseOperatorPageService.queryCaseRepaymentInfo({
      caseId: this.caseId
    }).subscribe(data => {
      this.caseInfo = data
    })
  }
}
</script>

<style lang="less">
.component.repayment-information {
  .el-form-item{
    margin-bottom: 0;
  }
}
</style>
